<template>
	<tm-app color="#EFEFEF">
		<navbar-module title="服务工单"/>
		<tabs-module :list="tabsTitle" @tabschange="tabschange"/>

        <view v-if="itemData.length>0" class="firstDom">
			<view v-if="state === '0'" class="listDom">
				<tm-scrolly :refresher="false" v-model="pull" v-model:bottom-value="bottomFresh" @refresh="refresh" @bottom="refreshBottom" _style="height:100%">
					<no-work-list-item :data="{}" v-for="item in itemData" :key="item.code" :url="`/pages/service/form/form?data=${encodeURIComponent(JSON.stringify(item))}`" :code="item.content.combo.name" label="服务" icon="tmicon-clock-fill">
						<tm-text :label="`猪仔名称：${item.pig.name}`" class="text" :fontSize="32"/>
						<!-- <tm-text :label="`服务项目：${item.content.combo.name}`" class="text" color="red"/> -->
						<tm-text :label="`所在猪圈：${item.pig.pigsty.name}`" class="text" :fontSize="32"/>
						<tm-text :label="`创建时间：${item.createTime}`" class="text text-border" color="#999" :font-size="28"/>
					</no-work-list-item>
				</tm-scrolly>
			</view>
			
			
			<view v-else-if="state === '1'" class="listDom">
				<tm-scrolly :refresher="false" v-model="pull" v-model:bottom-value="bottomFresh" @refresh="refresh" @bottom="refreshBottom" _style="height:100%">
					<was-work-list-item :data="{}" :url="`/pages/service/details/details?data=${encodeURIComponent(JSON.stringify(item))}`" v-for="item in itemData" :key="item.code" :code="item.content.combo.name" icon="tmicon-clock-fill">
					<tm-text :label="`猪仔名称：${item.pig.name}`" class="text" :fontSize="32"/>
					<!-- <tm-text :label="`服务项目：${item.content.combo.name}`" class="text" color="red"/> -->
					<tm-text :label="`所在猪圈：${item.pig.pigsty.name}`" class="text" :fontSize="32"/>
					<tm-text :label="`完成时间：${item.completeTime}`" class="text text-border" color="#999" :font-size="28"/>
					</was-work-list-item>
				</tm-scrolly>
			</view>
		</view>
		<view v-else>
			<no-data :flag="loadFlag"/>
		</view>
	</tm-app>
</template>

<script setup lang='ts'>
	import { onShow } from "@dcloudio/uni-app";
	import { ref } from 'vue'
	import {getOneWorkOder,finishService} from '../../index/resource/http'

	const state = ref('0')
	const itemData = ref([])
	const loadFlag = ref(false)

	const tabsTitle = ref([
		{ key: '0', title: '未完成'},
		{ key: '1', title: '已完成'},
	])

	onShow(()=>{
		loadFlag.value = false
		getData()
	})

    const params = {pageNo:1,pageSize:10}
	const bottomFresh = ref(false)
	const pull = ref(false)
	const bottomFlag = ref(true)

	const getData = async ()=>{
		itemData.value = []
		params.pageNo = 1
		if(state.value === '0'){
			const {data} = await getOneWorkOder('L5',params)
			itemData.value = data.records
			bottomFlag.value = data.hasNext
		}else if(state.value === '1'){
			const {data} = await finishService(params)
			itemData.value = data.records
			bottomFlag.value = data.hasNext
		}
		
		loadFlag.value = true
	}

 	const tabschange = (key)=>{
		loadFlag.value = false
		state.value = key
		getData()
	}
	
	const refreshBottom = async () => {
		if(bottomFlag.value){
			bottomFresh.value = true
			params.pageNo++
			let res 
			if(state.value === '0'){
				res = await getOneWorkOder('L5',params)
			}else if(state.value === '1'){
				res = await finishService(params)
			}
			itemData.value.push(...res.data.records)
			bottomFresh.value = false
			bottomFlag.value = res.data.hasNext
		}
		
	}
	
	const refresh = () =>{
		pull.value = false
	}
</script>

<style>

</style>
